﻿@media screen and (max-width: 767px) {
    * {margin: 0 auto;}
    html, body{width: 100%;}
    #id_pass {float: none;}
    #keep_login{float: none;}
    input {margin: 0 10px;}
    #keep_ID {font-size: 15px;}
    .span_3 {width: 280px;}
    .span_4 {width: 280px;}
    #main_header {
        width: 80%;
        margin-top: 45px;
        height: 100px;
        line-height: 100px;
        background-color: greenyellow;
        border: 1px solid black;
        border-radius: 5px;
    }
    #main_header > h1 {font-size: 2em;}
    #main_footer > small, #main_footer > small > span {font-size: 0.5em;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    html {
        background-color: lightgray;
    }

    .container {
        margin: 0;
        padding: 0;
    }
    .row {
        overflow: hidden;
        width: 100%;
    }

    #main_header {
        margin-top: 150px;
        height: 55px;
        line-height: 55px;
        background-color: greenyellow;
        border: 1px solid black;
        border-radius: 5px;
    }
    #main_header > h1 {font-size: 2.5em;}
    #content {overflow: hidden;}
    #main_aside{float:left; margin-top: 10px; margin-left:5px; margin-right: -5px;}
    #main_section {float: left; margin-left: 10px; margin-right: -10px;}

    .span_2 {width:140px;}
    .span_3 {width:200px;}
    .span_4 {width:300px;}
    .span_6 {width:460px;}
    .span_9 {width:74.5%;}
    .span_12 {width:100%;}
}

@media only screen and (min-width: 960px){
    html {
        background-color: white;
    }
    .container {
        width: 960px;
        margin: 0 auto;
    }
    .row {
        overflow: hidden;
        margin-left: 10px;
        margin-right: 10px;
    }

    #main_header {
        margin-top: 150px;
        height: 55px;
        line-height: 55px;
        background-color: greenyellow;
        border: 1px solid black;
        border-radius: 5px;
    }
    #main_header > h1 {font-size: 3em;}
    #main_section {
        margin-right: -10px;
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #main_aside { 
        margin-top: 10px;
        margin-left: 5px;
        margin-right: -5px;
        margin-bottom: 10px;
    }

    .span_2 {width:140px;}
    .span_3 {width: 200px;}
    .span_4 {width:300px;}
    .span_6 {width:460px;}
    .span_9 {width:700px;}
    .span_12 {width:960px;}
}
